import React, { FC, useEffect, useState } from 'react'
import { Typography } from 'antd'
import { useRequest } from 'ahooks'
import { useParams } from 'react-router-dom'
// *获取stat数据的服务
import { getComponentStatService } from '../../../services/stat'

// *获取组件类型的方法--根据类型返回对应组件的配置
import { getComponentConfByType } from '../../../components/QuestionComponents'

// *引入图表
// import PieDemo from './PieDemo'
import BarDemo from './BarDemo'
const { Title } = Typography

type PropsType = {
  selectedComponentId: string
  setComponentType: string
}

const ChartStat: FC<PropsType> = (props: PropsType) => {
  const { selectedComponentId, setComponentType } = props

  //* 获取路由参数--questionId
  const { id = '' } = useParams()

  //* 存储stat数据
  const [stat, setStat] = useState([])

  //* 获取stat数据
  const { run } = useRequest(
    async (questionId, componentId) => await getComponentStatService(questionId, componentId),
    {
      manual: true,
      onSuccess(res) {
        setStat(res.stat)
      },
    }
  )

  useEffect(() => {
    if (selectedComponentId) run(id, selectedComponentId)
  }, [id, selectedComponentId])

  //* 根据selectedComponentId 生成对应的图表类型
  function genStatElem() {
    // 1.没有选中组件
    if (!selectedComponentId) return <div>未选中组件</div>

    // 2.有选中组件
    // 根据类型返回对应组件的配置
    const { StatComponent } = getComponentConfByType(setComponentType) || {}
    // (1)组件无对应统计图表
    if (StatComponent == null) return <div>该组件无统计图表</div>
    // (1)组件有对应统计图表
    return <StatComponent stat={stat} />
  }

  return (
    <>
      <Title level={3}>图表统计</Title>
      <div>{genStatElem()}</div>
    </>
  )
}

export default ChartStat
